/**
 * 旭日图
 * SunburstEcharts (reactCharts)
 * @author sh
 * @date  2020-12-28
 */

import React from 'react';
import { Spin } from 'antd';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';
import { NoDataC } from '../../other';
import Color from '../../../css/colors';
import _ from 'lodash';
class SunEchartsC extends React.Component {
  static defaultProps = {
    data: undefined, // 数据
    radius: ['20', '100%'], // 图形大小
    center: ['50%', '50%'], // 图形坐标
    height: '100%',
    width: '100%',
  };

  //
  showEcharts = () => {
    const { toolTipFormat, data, radius, center, height, width, total } = this.props;
    const option = {
      color: Color.echart,
      backgroundColor: Color.echartItems.bgColor, //echarts整个画布的背景色
      title: {
        text: total ? `总访问量：${total}` : '总访问量：--',
        left: '5%',
        top: '5%',
        right: 'auto',
        bottom: 'auto',

        textStyle: {
          fontSize: 15,
        },
      },
      tooltip: {
        formatter: toolTipFormat
          ? toolTipFormat
          : function (params) {
              const str = `<div style="font-size:14px">${params.name}</div>` + `<div style='font-size:14px;margin-top:3px';height:10px>访问次数：${params.value}</div>`;
              return str;
            },
        padding: [10, 15, 10, 15],
        confine: true,
      },
      series: {
        radius: radius,
        center: center,
        hoverOffset: 10,
        hoverAnimation: true,
        type: 'sunburst',
        sort: null,
        nodeClick: false, // 点击子节点无操作
        highlightPolicy: 'ancestor', // 鼠标移动到子节点高亮父节点
        data: data,
        //    emphasis: {
        //     itemStyle: {
        //         color: 'red'
        //     }
        //   },
        downplay: {
          itemStyle: {
            color: Color.echartItems.downplayItemColor, // 处鼠标停留时非鼠标覆盖扇区样式
          },
        },
        //  highlight: {
        //   itemStyle: {
        //       color: 'blue'
        //   }
        // },
        levels: [
          {},
          {
            r0: '23%', // 内圈圆环内径
            r: '54%', // 圆环外径
            itemStyle: {
              borderWidth: 2,
            },
            label: {
              show: false,
            },
          },
          {
            r0: '60%',
            r: '77%',
            label: {
              show: false,
            },
          },
          {
            r0: '80%', // 外圈圆环
            r: '90%',
            label: {
              show: false,
            },
            // itemStyle: {
            //     borderWidth: 3
            // }
          },
        ],
      },
    };
    let initStatus = !!data; // 标记是否达到初始化状态(true:可以初始化图表，false：还未获取到数据)

    return (
      <>
        <Spin spinning={!initStatus} tip='加载中...'>
          {data ? data.length ? <ReactEcharts style={{ height: height, width: width }} option={option} /> : <NoDataC /> : <div style={{ height: height, width: width }}></div>}
        </Spin>
      </>
    );
  };

  render() {
    return <div>{this.showEcharts()}</div>;
  }
}
SunEchartsC.propsTypes = {
  data: PropTypes.array, // 数据（[{name:'',value:'访问量',children:[...],...]）
  width: PropTypes.string, // 图形宽度
  height: PropTypes.string, // 图形高度
  total: PropTypes.number, // 总访问次数
};

export default SunEchartsC;
